<template>
  <n-button @click="initSocket">连接</n-button>
  <n-button @click="close">断开</n-button>
  <div f-c-c>
    广播<n-input v-model:value="msg" />
    <n-button @click="sendMsg"> 发送 </n-button>
  </div>
  <div f-c-c>
    callback<n-input v-model:value="privateMsg" />
    <n-button @click="sendPrivateMsg"> 发送 </n-button>
  </div>

  <div f-c-c>
    广播<n-input v-model:value="topicValue"></n-input>
    <n-button @click="sendTopic"> 发送 </n-button>
  </div>
  <div f-c-c>
    单播<n-input v-model:value="toSingle.userId"></n-input>
    <n-input v-model:value="toSingle.content"></n-input>
    <n-button @click="sendUser"> 发送 </n-button>
  </div>
</template>

<script lang="ts" setup>
import { initSocket, close, send } from "./sockjs";
import { request } from "@/utils";

const msg = ref("");
const privateMsg = ref("");
const topicValue = ref("");
const toSingle = ref({
  userId: "",
  content: "",
});

const sendMsg = () => {
  send("/message", { messageContent: msg.value });
};
const sendPrivateMsg = () => {
  send("/private-message", { messageContent: msg.value });
};

const sendTopic = () => {
  request.post("/sendMessage", { messageContent: topicValue.value });
};

const sendUser = () => {
  request.post(`/sendTo/${toSingle.value.userId}`, {
    messageContent: toSingle.value.content,
  });
};
</script>
